<template>
  <div class="container">
    <div class="card">
      <div class="grid">
        <!-- 左侧 -->
        <div class="left-section">
          <div class="mb-6">
            <span class="error-code">{{ errorCode }}</span>
            <h1 class="error-title">{{ errorTitle }}</h1>
            <p class="error-message">{{ errorMessage }}</p>
          </div>
          <div class="suggestions">
            <div class="suggestion-item">
              <i class="fas fa-check-circle"></i>
              <span>检查URL是否拼写正确</span>
            </div>
            <div class="suggestion-item">
              <i class="fas fa-check-circle"></i>
              <span>清除浏览器缓存和Cookie</span>
            </div>
            <div class="suggestion-item">
              <i class="fas fa-check-circle"></i>
              <span>尝试使用不同的浏览器</span>
            </div>
          </div>
          <div class="buttons">
            <router-link to="/" class="button-home">
              <i class="fas fa-home"></i> 返回主页
            </router-link>
            <button class="button-support">
              <i class="fas fa-headphones"></i> 联系支持
            </button>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right-section">
          <div class="right-content">
            <div class="error-code-large">{{ errorCode }}</div>
            <div class="icon-container">
              <div class="circle-bg">
                <i class="fas fa-exclamation-triangle"></i>
              </div>
              <div class="ping-circle"></div>
            </div>
            <p>看起来这里出了点问题</p>
          </div>
        </div>
      </div>
      <div class="footer">
        <p>如果问题仍然存在，请联系我们的技术支持团队</p>
        <p>support@example.com | 400-123-4567</p>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { computed } from "vue";
import { useRoute } from "vue-router";

export default {
  name: "ErrorPage",
  setup() {
    const route = useRoute();
    const errorCode = computed(() => route.query.code || "404");
    const errorTitle = computed(() => {
      switch (errorCode.value) {
        case "404":
          return "页面不存在";
        case "500":
          return "服务器内部错误";
        case "403":
          return "访问被拒绝";
        case "401":
          return "未授权";
        default:
          return "发生错误";
      }
    });
    const errorMessage = computed(() => {
      switch (errorCode.value) {
        case "404":
          return "您访问的页面不存在或已被移除。";
        case "500":
          return "服务器遇到问题，请稍后再试。";
        case "403":
          return "您无权访问此页面。";
        case "401":
          return "请先登录再访问此页面。";
        default:
          return "发生未知错误，请稍后再试。";
      }
    });

    return { errorCode, errorTitle, errorMessage };
  },
};
</script>
  
  <style scoped>
/* === Global Reset and Base Styles === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: #f8f9fa;
  color: #2d3748;
  line-height: 1.6;
  font-size: 16px;
}

/* === Main Container === */
.container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background-color: #f8f9fa;
}

.card {
  max-width: 1024px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.card:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

/* === Grid Layout === */
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Left Section (Error Info) === */
.left-section {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .left-section {
    padding: 48px;
  }
}

.error-code {
  display: inline-block;
  padding: 4px 12px;
  background-color: #fef2f2;
  color: #c53030;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.error-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #1a202c;
  line-height: 1.2;
  margin-bottom: 8px;
}

.error-message {
  font-size: 1.125rem;
  color: #718096;
  margin-bottom: 32px;
}

.suggestions {
  margin-bottom: 32px;
}

.suggestion-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.suggestion-item i {
  color: #48bb78;
  margin-right: 12px;
  font-size: 1.25rem;
}

.suggestion-item span {
  color: #4a5568;
  font-size: 1rem;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .buttons {
    flex-direction: row;
    gap: 16px;
  }
}

.button-home {
  padding: 12px 24px;
  background: linear-gradient(to right, #2b6cb0, #4299e1);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button-home:hover {
  background: linear-gradient(to right, #1a4971, #3182ce);
  transform: translateY(-2px);
}

.button-home i {
  margin-right: 8px;
}

.button-support {
  padding: 12px 24px;
  background-color: #e2e8f0;
  color: #2d3748;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.button-support:hover {
  background-color: #cbd5e0;
  transform: translateY(-2px);
}

.button-support i {
  margin-right: 8px;
}

/* === Right Section (Graphic) === */
.right-section {
  background: linear-gradient(135deg, #2b6cb0, #4c51bf);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .right-section {
    padding: 48px;
  }
}

.right-content {
  text-align: center;
  color: #ffffff;
}

.error-code-large {
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 700;
  opacity: 0.2;
  margin-bottom: 16px;
}

.icon-container {
  position: relative;
  margin-bottom: 24px;
}

.circle-bg {
  width: 128px;
  height: 128px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  animation: pulse 2s infinite ease-in-out;
}

.circle-bg i {
  font-size: 3rem;
  color: #ffffff;
}

.ping-circle {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 64px;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: ping 3s infinite ease-in-out;
}

.right-content p {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.8);
}

/* === Footer Section === */
.footer {
  background-color: #f8f9fa;
  padding: 24px;
  text-align: center;
  color: #718096;
  font-size: 0.875rem;
}

.footer p + p {
  margin-top: 4px;
}

/* === Animations === */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  75% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* === Responsive Adjustments === */
@media (max-width: 767px) {
  .container {
    padding: 32px 12px;
  }

  .card {
    max-width: 90%;
  }

  .left-section {
    padding: 24px;
  }

  .right-section {
    padding: 24px;
  }

  .error-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
  }

  .error-message,
  .right-content p {
    font-size: 1rem;
  }

  .circle-bg {
    width: 96px;
    height: 96px;
  }

  .circle-bg i {
    font-size: 2.5rem;
  }

  .ping-circle personally {
    width: 48px;
    height: 48px;
    top: -12px;
    right: -12px;
  }
}
.card {
  transition: box-shadow 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
}
/* 以下为 error-page.css 内容 */
</style>